<style>
  tr.actived{
    background: #eee;
  }
</style>
<style scoped>
  .control>label{
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin:0 10px;
  }
</style>
<template>
  <main>
    <div class="tile is-ancestor">
      <div class="tile is-parent is-8">
        <div class="tile is-ancestor">
          <div class="tile is-parent">
            <article class="tile is-child">
              <h4 style="text-align: right;margin-bottom: 10px">
               <span style="display: inline-block" class="control has-addons">
                 <label for="">分类类型</label>
                 <select name="" class="select" @change="getList" style="height: 30px;border-radius: 0;" v-model="page.categoryId" id="">
                   <option value="">默认</option>
                   <option v-for="item in classList" :value="item.id">{{item.name}}</option>
                 </select>
                 <label for="">关键字</label>
                <input class="input" type="text" v-model="page.keyword">
                <a class="button is-info" @click="getList">查询</a>
              </span>
              </h4>
              <table class="table">
                <thead>
                <tr>
                  <th>名称</th>
                  <th>描述</th>
                  <th>类型</th>
                  <th>排序</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in list" :class="{'actived':item.id == id}" @click="getModify(item.id)">
                  <td>{{item.name}}</td>
                  <td>{{item.description}}</td>
                  <td>{{types[item.categoryId]}}</td>
                  <td>{{item.displayOrder}}</td>
                  <td class="is-icon">
                    <div class="btn-group">
                      <span @click.stop="modify(item.id)" class="btn">
                        编辑
                      </span>
                      <span @click.stop="deletes(item.id)" class="btn">
                        删除
                      </span>
                    </div>
                  </td>
                </tr>
                </tbody>
              </table>
              <page :data.sync="pageData" @choose="getList"></page>
            </article>
          </div>
        </div>
      </div>
      <div class="tile is-parent is-4" style="height: 200px;border-left: 1px solid #dfdfdf">
        <article class="tile is-child">
          <div class="block">
            <p class="title is-5 text-left">添加/编辑</p>
          </div>
          <div class="block">
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">标题</label>
              </div>
              <div class="control">
                <div class="control is-fullwidth">
                  <input class="input" v-model="param.name" type="text">
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">副标题</label>
              </div>
              <div class="control">
                <div class="control is-fullwidth">
                  <input class="input" v-model="param.viceTitle" type="text">
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">排序</label>
              </div>
              <div class="control">
                <div class="control is-fullwidth">
                  <input class="input" v-model="param.displayOrder" type="text">
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">描述</label>
              </div>
              <div class="control">
                <div class="control is-fullwidth">
                  <textarea class="textarea" name="" v-model="param.description" id="" cols="30" rows="10"></textarea>
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">激活</label>
              </div>
              <div class="control">
                <div class="control is-fullwidth">
                  <input v-model="param.enabled" type="checkbox">
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">所属类型</label>
              </div>
              <div class="control">
                <div class="select is-fullwidth">
                  <select v-model="param.categoryId">
                    <option v-for="it in classList" :value="it.id">{{it.name}}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label"></label>
              </div>
              <div class="control">
                <button class="button is-primary" @click="add">添加</button>
                <button style="margin-left: 10px" class="button" @click="toModify">修改</button>
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>
  </main>
</template>

<script>
  import mixin from './mixin'
  export default {
    data () {
      return {
        param:{
          "author": "",
          "categoryId": 0,
          "content": "",
          "createdDate": "",
          "description": "",
          "displayOrder": 0,
          "enabled": true,
          "image": "",
          "keywords": "",
          "langKey": "",
          "name": "",
          "source": "",
          "viceTitle": "",
          "visits": 0
        },
        page:{
          page:0,
          size:5,
          keyword:'',
          categoryId:'',
          sort:[]
        },
      }
    },
    mixins:[mixin],
    methods: {
      getList (num) {
        this.page.page = num?num:this.page.page
        let param = qs.stringify({sort:'createdDate,desc'})
        this._get('information/api/information/page?'+param,this.page)
      },
      add () {
        this._add('information/api/information',this.param,this.getList)
      },
      modify (id) {
        this.$router.push({path:'/detail',query:{id:id}})
      },
      getModify (id) {
        this.id = id
        this._getModify('information/api/information/'+id,{})
      },
      toModify () {
        this._modify('information/api/information',Object.assign({id:this.id},this.param),this.getList)
      },
      deletes (id) {
        this._delete('information/api/information/'+id,{},this.getList)
      }
    },
    mounted () {
        this.getClass()
        this.getList(0)
    }
  }
</script>
